<template name="appTokenCreate">

<div class="small ui modal" id="lowOtsKeyWarning">
  <div class="header">OTS Keys Running Low!</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          Warning: Your OTS Keys are running low.
        </div>
        <p>You only have <strong>{{otsKeysRemaining}}</strong> OTS Keys remaining. When you have used all of these, you will no longer be able to send QRL or Tokens from this wallet.</p>
        <p>It is strongly suggested that you create a new wallet, and move all your QRL and Tokens to it to ensure you do not lose access to your funds.</p>
        <p><a href="https://docs.theqrl.org/developers/ots/" target="_blank">Click here to learn what OTS Keys are.</a></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button red">Okay</div>
  </div>
</div>

<div class="small ui modal" id="invalidNodeResponse">
  <div class="header">WARNING - Bad Response</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          WARNING - The node you've requested this transaction from replied with bad data that doesn't match your intended transaction parameters.
          <br /><br />
          This transaction has been cancelled automatically to protect your funds.
          <br /><br />
          Please report this issue through a Github issue, or directly to the QRL Team via email: info@theqrl.org
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button red">Okay</div>
  </div>
</div>

<div class="small ui modal" id="maxDecimalsReached">
  <div class="header">Error - Decimals value too large</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          You have selected a decimal value that is too large for the total supply of your token. With your current allocation of {{tokenTotalSupply}} tokens, you can use up to {{maxDecimals}} decimals.
          <br /><br />
          Please adjust your decimals value and try again.
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button red">Okay</div>
  </div>
</div>

<div class="small ui modal" id="ledgerNotSupported">
  <div class="header">Ledger Not Supported</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          Ledger Nano not Supported for Tokens
        </div>
        <p>Sorry, Ledger Nano support for Token Creation and Token Transfers is still being developed and tested. We will enable this functionality at a later stage.</p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button">Okay</div>
  </div>
</div>

<div class="small ui modal" id="otsKeyReuseDetected">
  <div class="header">OTS Key Reuse</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          You have attempted to create a transaction using an OTS Key Index that has previously been used on the QRL Network.
          <br /><br />
          Please recreate your transaction using a unique OTS Key Index.
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button">Okay</div>
  </div>
</div>

<h4 class="ui header pageHeader">
  <i class="tags icon"></i>
  <div class="content">
    Create Token
  </div>
</h4>

<div class="ui left aligned segment pageSegment" id="tokenCreateForm">



  <form id="generateTokenForm" class="ui form">

    <h4 class="ui dividing header">Token Creator</h4>

    <h4 id="transferFormFromAddress" class="breakable"><a class="ui purple label">From Address</a> {{transferFrom.address}}</h4>
    <h4 class="breakable"><a class="ui yellow label">Quanta Balance</a> {{transferFrom.balance}}</h4>

    <h4 class="ui horizontal divider header">
      <i class="tags icon"></i>
      Token Details
    </h4>

    <div class="field">
      <label>Owner Address</label>
      <input type="text" id="owner" autocomplete="off">
    </div>
    <div class="field">
      <label>Token Symbol</label>
      <input type="text" id="symbol" placeholder="eg: TST, QRL, etc" autocomplete="off">
    </div>
    <div class="field">
      <label>Token Name</label>
      <input type="text" id="name" autocomplete="off">
    </div>
    <div class="field">
      <label>Decimals</label>
      <input type="text" id="decimals" value="10" autocomplete="off">
    </div>
    
    
    <h4 class="ui horizontal divider header">
      <i class="users icon"></i>
      Initial Token Holders
    </h4>

    <div id="tokenHolders">
      <div class="field">
        <label>Holder Balance</label>
        <div class="three fields">
          <div class="ten wide field">
            <input type="text" id="initialBalancesAddress_1" name="initialBalancesAddress[]" placeholder="Token Holder QRL Address" autocomplete="off">
          </div>
          <div class="five wide field">
            <input type="text" id="initialBalancesAddressAmount_1" name="initialBalancesAddressAmount[]" placeholder="Token Balance" autocomplete="off">
          </div>
          <div class="one wide field">
            <button class="ui red button removeTokenHolder"><i class="remove user icon"></i></button>
          </div>
        </div>
      </div>
    </div>

    <button id="addTokenHolder" class="ui green button">
      <i class="add user icon"></i>
      Add Another Holder
    </button>

    <h4 class="ui horizontal divider header">
      <i class="file icon"></i>
      Transaction Details
    </h4>

    <div class="field">
      <label>Token Creation Fee (In Quanta)</label>
      <input type="text" id="fee" value="0.001" autocomplete="off">
    </div>

    <div class="field">
      <label>OTS Key Index</label>
      <input type="text" id="otsKey" placeholder="0" value="{{otsKeyEstimate}}" autocomplete="off">
    </div>

    <div class="field">
      <div class="ui warning icon message" style="display: inline-flex;">
        <i class="warning icon"></i>
        <div class="content">
          <div class="header">
            OTS Key Index Warning
          </div>
          <p>The <strong>OTS (One Time Signature)</strong> Key Index in the field above is estimated based on data provided by the QRL node you're connected to. You should <b>never</b> re-use the same OTS Key for more than 1 transaction. If you are unsure, it is safest to write down all used OTS Key Indexes, and store them in a safe place.</p>
        </div>
      </div>
    </div>

    <div class="field">
      <button id="createToken" class="ui huge primary button red" style="float: left;">Create Token</button>
      <br />
    </div>

    <div class="field">
      <br />
      <div id="generating" style="display: none;" class="ui icon message">
        <i class="notched circle loading icon"></i>
        <div class="content">
          <div class="header">
            Just one moment
          </div>
          <p>Generating your new token transaction...</p>
        </div>
      </div>
    </div>   

  </form>
</div>

<div id="tokenCreationFailed" class="ui red segment pageSegment" style="display: none;">
  <h4>Token Creation Failed</h4>
  <p style="word-wrap: break-word; word-break: break-all;">Error: {{tokenCreationError}}</p>
</div>


</template>